<!--
 * @Description: 
 * @Version: V1.0.0
 * @Author: 周艳凯 484894717@qq.com
 * @Date: 2024-10-31 17:09:32
 * @LastEditors: 周艳凯 484894717@qq.com
 * @LastEditTime: 2024-11-01 23:55:09
 * @FilePath: tabs-nav-ink.vue
 * Copyright 2024 Marvin, All Rights Reserved. 
 * 2024-10-31 17:09:32
-->
<template>
  <div :class="cls" :style="style"></div>
</template>

<script lang="ts">
import { elementSizeType } from "@/ArcoUni/hook/user-size-dom";
import { Direction } from "@/ArcoUni/utils/interface";
import type { CSSProperties, PropType } from "vue";
import {
  computed,
  defineComponent,
  nextTick,
  onMounted,
  ref,
  toRefs,
  watch,
} from "vue";

export default defineComponent({
  name: "TabsNavInk",
  options: {
    // 虚拟化节点
    virtualHost: true,
  },
  props: {
    activeTabRef: {
      type: Object as PropType<elementSizeType>,
    },
    direction: {
      type: String as PropType<Direction>,
    },
    disabled: Boolean,
    animation: Boolean,
  },
  setup(props) {
    const { activeTabRef } = toRefs(props);
    const prefixCls = "arco-tabs-nav-ink";
    const position = ref(0);
    const size = ref(0);

    const style = computed<CSSProperties>(() => {
      if (props.direction === "vertical") {
        return {
          top: `${position.value}px`,
          height: `${size.value}px`,
        };
      }

      return {
        left: `${position.value}px`,
        width: `${size.value}px`,
      };
    });

    const getInkStyle = () => {
      if (activeTabRef.value) {
        const _position =
          props.direction === "vertical"
            ? activeTabRef.value.top
            : activeTabRef.value.left;
        const _size =
          props.direction === "vertical"
            ? activeTabRef.value.height
            : activeTabRef.value.width;
        if (_position !== position.value || _size !== size.value) {
          position.value = _position;
          size.value = _size;
        }
      }
    };

    onMounted(() => {
      nextTick(() => getInkStyle());
    });

    watch(
      () => activeTabRef.value,
      () => {
        getInkStyle();
      },
    );

    const cls = computed(() => [
      prefixCls,
      {
        [`${prefixCls}-animation`]: props.animation,
        [`${prefixCls}-disabled`]: props.disabled,
      },
    ]);

    return {
      prefixCls,
      cls,
      style,
    };
  },
});
</script>
